<template>
	<view class="feedback">
		<view class="scroll-h">
			<view v-for="(tab,index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id" :data-current="index"
				@click="ontabtap">
				<text class="uni-tab-item-title"
					:class="tabIndex == index ? 'uni-tab-item-title-active' : ''">{{tab.name || ''}}</text>
				<text v-show="tabIndex == index" class="uni-tab-item-text"></text>
			</view>
		</view>
		<swiper class="swiper" duration="300" :current="tabIndex" @change="ontabchange">
			<swiper-item>
				<view class="swiper-box">
					<view class="box-noe" v-if="state">
						<uni-list :border="false" v-if="listData.length != 0">
							<uni-list-item :border="false" :title="item.name" clickable @click="onClick('add-invoice',item.id)" :key="item.id" v-for="item in listData"/>
						</uni-list>
					</view>
					<view style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;flex: 1;" v-else>
						<image :src="imgUrl" style="width: 350rpx;height:291rpx;margin-bottom: 36rpx;"></image>
						<text style="font-size: 32rpx;font-weight: 500;color: #777777;margin-bottom: 120rpx;">暂无数据!</text>
					</view>	
					<view class="butt">
						<button class="but" plain @click="addClick('add-invoice')">添加发票抬头</button>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-box">
					<template v-if="cardData.state">
					<view class="box-tow" v-if="cardData.data.length != 0">
						<uni-card :key="arr.id" v-for="arr in cardData.data" :title="arr.create_time" :extra="arr.status?'已开票':'开票中'" :is-shadow="false" :border="false" :margin="'0 0 20rpx'" :spacing="'20rpx'" :padding="0" >
							<view class="title">
								{{arr.name || ''}}
							</view>
							<view class="body">
								<view class="b-box">
									<text class="b-text">抬头类型</text>
									<text class="b-text b-text1">{{arr.rise == 1?'个人':'企业'}}</text>
								</view>
								<view class="b-box">
									<text class="b-text">发票类型</text>
									<text class="b-text b-text1">{{arr.invoice_type == 1?'普通发票':'增值税专用发票'}}</text>
								</view>
								<view class="b-box1">
									<view>
										<text class="b-text2">￥</text><text class="b-text2 b-text3">{{arr.invoice_price || '0.00'}}</text>
									</view>
								</view>
							</view>
						</uni-card>
						<uni-load-more iconType="auto" v-if="cardData.data.length != 0" :status="cardData.status" @clickLoadMore="clickLoadMore" :content-text="contentText" />
					</view>
					</template>
					<view style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;flex: 1;" v-else>
						<image :src="imgUrl" style="width: 350rpx;height:291rpx;margin-bottom: 36rpx;"></image>
						<text style="font-size: 32rpx;font-weight: 500;color: #777777;margin-bottom: 120rpx;">暂无数据!</text>
					</view>	
					<view class="butt">
						<button class="but" plain @click="addClick('put-invoice')">申请发票</button>
					</view>
				</view>
				
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl:`${getApp().globalData.imgScr}jd/dingdankongzhuangtai.png`,
				url:'/hotelAdmin/my/invoice',
				tabIndex: 0, // 顶部切换栏状态 0：反馈 1：反馈记录
				tabBars: [{ // 顶部切换栏 数据
					name: '发票抬头',
					id: 'fk'
				}, {
					name: '我的发票',
					id: 'fkjl'
				}],
				state:true,
				listData:[], // 发票抬头列表
				cardData:{
					data:[],
					state:true,
					page:1, // 初始页码
					total:0, // 数据总条数
					status: 'more', // 加载状态
				}, // 发票申请记录
				contentText: { // 加载状态对应的提示语
					contentdown: '点击加载更多数据',
					contentrefresh: '正在加载中...',
					contentnomore: '没有更多数据'
				}
			};
		},
		onPullDownRefresh() {
			let _this = this
			// 下拉刷新时触发
		        setTimeout(function () {
					uni.showToast({
						title:"刷新成功",
						icon:"none"
					})
					// 重置 data() 数据
					// Object.assign(_this.$data, _this.$options.data())
					if(_this.tabIndex == 0) {
						_this.getClick()
					}else {
						Object.assign(_this.cardData, _this.$options.data().cardData)
						_this.getClick1()
					}
		            uni.stopPullDownRefresh();
		        }, 1000);
		    },
		onShow() {
			if(this.tabIndex == 1) 	Object.assign(this.cardData, this.$options.data().cardData)
			if(this.tabIndex) this.getClick1()
			else this.getClick()
		},
		methods: {
			/**
			 * 顶部栏 切换时触发
			 * @param {object} e  获取切换元素的实例
			 */
			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.tabIndex = index;
			},
			/**
			 * 轮播图 页面切换时触发
			 * @param {Object} e 切换到的轮播图页面实例对象
			 */
			async ontabchange(e) {
				let _this = this
				let index = e.target.current || e.detail.current;
				this.tabIndex = index;
				if(index == 0 && this.listData.length == 0) {
					this.getClick()
				}else if(index == 1 && this.cardData.data.length == 0) {
					this.getClick1()
				}
			},
			/**
			 * 添加发票抬头 申请发票 共同事件
			 * @param {string} path 跳转的页面地址
			 */
			addClick(path) {
				let _this = this
				uni.navigateTo({
				    url: `${_this.url}/${path}/${path}`
				});
			},
			/**
			 * 抬头列表点击事件
			 * @param {number} id
			 */
			onClick(path,id) {
				let _this = this
				uni.navigateTo({
				    url: `${_this.url}/${path}/${path}?id=${id}`
				});
			},
			/**
			 * @param {Object} e 加载更多的状态 
			 */
			async clickLoadMore(e) {
				if(e.detail.status == 'no-more') return this.cardData.status = 'no-more'
				this.cardData.status = 'loading'
				this.cardData.page += 1
				this.getClick1(this.cardData.page)
			},
			/**
			 * 抬头列表请求数据
			 */
			async getClick() {
				let _this = this
				try{
					let res = await this.$http.post('/index/Hotelpersonal/invoice_list')
					this.listData = res
					this.state = this.listData.length
				}catch(e){
					this.state = false
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			},
			/**
			 * 开票记录请求数据
			 */
			async getClick1(page=1,limit = 10) {
				let _this = this
				try{
					let res = await this.$http.post('/index/Hotelpersonal/invoice_order',{
						page:page,
						limit:limit,
					})
					if(res.data.length > 0) this.cardData.data = [...this.cardData.data,...res.data]
					this.cardData.state = this.cardData.data.length
					this.cardData.total = res.total
					if(this.cardData.page >= res.last_page) return this.cardData.status = 'no-more'
					this.cardData.status = 'more'
				}catch(e){
					this.cardData.state == false
					//TODO handle the exception
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.feedback {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		height: 100vh;
	.scroll-h {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
	}

	.uni-tab-item {
		position: relative;
		flex: 1;
		display: inline-block;
		text-align: center;
	}

	.uni-tab-item-title {
		color: rgba($color: #000000, $alpha: 0.7);
		font-size: 28rpx;
		height: 80rpx;
		line-height: 80rpx;
		opacity: 0.7;
	}
	.uni-tab-item-text {
		position: absolute;
		bottom: 8rpx;
		left: 50%;
		transform: translateX(-50%);
		height: 4rpx;
		width: 36rpx;
		background: linear-gradient(255deg, #8dc9f1, #d8eefc);
		border-radius: 2rpx;
	}
	.uni-tab-item-title-active {
		color: #000000;
		font-size: 34rpx;
		font-weight: 600;
	}
	.uni-card {
		border-radius: 20rpx;
		.uni-card__header {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #EDEDED;
			font-size: 28rpx;
			color: #000000;
			font-weight: 600;
		}
		.p-input {
			width: 100%;
		}
	}
	.swiper {
		height: calc(100% - 100rpx);
		.swiper-box {
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 100%;
			height: 100%;
			padding: 40rpx 20rpx;
			.box-noe {
				flex:1;
				width: 100%;
				margin-bottom: 40rpx;
				border-radius: 20rpx;
				background-color: #ffffff;
				overflow: auto;
				.uni-list-item {
					border-bottom: 1rpx solid #ededed;
				}
				.uni-list-item__container {
					padding: 40rpx 32rpx;
					.uni-list-item__content-title {
						font-size: 28rpx;
						font-weight: 500;
						color: #000000;
					}
				}
			}
			.box-tow {
				flex:1;
				width: 100%;
				margin-bottom: 40rpx;
				overflow: auto;
				.title {
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
					line-height: 80rpx;
				}
				.body {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.b-box {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						.b-text {
							font-size: 24rpx;
							font-weight: 500;
							color: rgba($color: #000000, $alpha: 0.5);
						}
						.b-text1 {
							color:#000000;
						}
					}
					.b-box1 {
						flex:1;
						display: flex;
						justify-content: center;
						align-items: center;
						.b-text2 {
							font-size: 28rpx;
							font-weight: 500;
							color: #000000;
						}
						.b-text3 {
							font-size: 40rpx;
						}
					}
				}
			}
			.butt {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 80rpx;
				.but {
					flex: 1;
					background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
					border-radius: 40rpx;
					line-height: 80rpx;
					font-size: 34rpx;
					font-weight: 500;
					color: #FFFFFF;
					border: 0;
					margin: 0 20rpx;
				}
			}
		}
	}
}	
</style>
